<template>
  <div class="mt20">

    <!-- 页面主体 -->
    <div class="container">
      <div class="main">
        <!-- 轮播图 -->
        <el-carousel :interval="4000" type="card">
          <el-carousel-item v-for="banner in bannerList" :key="banner.bannerId">
            <a target="_blank" :href="banner.linkUrl">
              <el-image :src="banner" :fit="cover">
                <div slot="error" class="image-slot">
                  <img src="../assets/styles/images/2.jpg" alt="" style="width: 1700px;height: 520px">
                </div>
              </el-image>
            </a>
          </el-carousel-item>
        </el-carousel>
        <!-- 正在热映 -->
        <div class="hot-movie">
          <div class="movie-header">
            <h2>门店浏览</h2>
            <a href="/movie">
              <span></span>
            </a>
          </div>
          <el-form :inline="true" :model="storeQuery" class="demo-form-inline">
            <el-form-item label="城市">
              <el-select v-model="storeQuery.cityName" placeholder="选择城市" clearable>
                <el-option label="广州" value="广州"></el-option>
                <el-option label="中山" value="中山"></el-option>
                <el-option label="英德" value="英德"></el-option>
                <el-option label="深圳" value="深圳"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="门店名称">
              <el-input v-model="storeQuery.storeName" placeholder="输入门店名" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchStore">搜索</el-button>
            </el-form-item>
          </el-form>
          <div class="" aria-rowspan="1">
            <div class="style:width=100%" v-for="(store,index) in storeList" :key="index">
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <div class="amap" id="amap">
                      <el-amap :vid=store.storeId :zoom="12"
                               :center="[store.position.split(',')[0],store.position.split(',')[1]]">
                        <!-- 标记 -->
                        <el-amap-marker
                          :position="[store.position.split(',')[0],store.position.split(',')[1]]"
                          :key="index"
                        ></el-amap-marker>
                      </el-amap>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <a :href="'/store/' + store.storeId">
                    <div class="grid-content bg-purple">
                      <el-descriptions class="margin-top" :title=store.storeName :column="1" :size="size">
                        <el-descriptions-item label="地址">{{ store.address }}</el-descriptions-item>
                        <el-descriptions-item label="营业时间">{{ store.openHour }} - {{ store.closeHour }}
                        </el-descriptions-item>
                        <el-descriptions-item label="联系电话">{{ store.telephone }}</el-descriptions-item>
                      </el-descriptions>
                    </div>
                  </a>
                </el-col>
              </el-row>
              <el-divider></el-divider>
            </div>
          </div>

        </div>
      </div>
      <!-- 侧边栏 -->
      <div class="aside">

        <el-card class="box-card mb20">
          <weather class="right-menu-item"/>
          <h2 class="hometitle">
            签到
            <el-tooltip content="每隔10分钟自动刷新" placement="left" effect="light">
              <i class="el-icon-refresh" @click="getSignData" style="cursor: pointer; float: right;"></i>
            </el-tooltip>
          </h2>
          <el-row style="line-height: 40px; text-align: center;">
            <el-col :lg="4">
              <el-tooltip content="通过发布租赁车辆可获取积分" placement="left" effect="light">
                <i class="el-icon-coin"></i>
              </el-tooltip>
            </el-col>
            <el-col :lg="8">
              <span style="font-weight: 600;">{{ signRecord.seriesDays }}</span> 积分
            </el-col>
            <el-col :lg="12">

              <el-button type="primary" v-if="signRecord.signinTodayFlag === 0" @click="toSignIn"
                         icon="el-icon-star-off" round>立刻签到
              </el-button>
              <el-button type="primary" v-else icon="el-icon-star-off" round disabled>
                今日已签到
              </el-button>
            </el-col>
          </el-row>
          <el-row v-if="signRecord.continuityDays > 0"
                  style="margin-top: 10px; text-align: center; background-color: rgb(236, 248, 255); line-height: 30px;">
            <div>
              <i class="el-icon-ice-tea"></i>
              你已经连续签到
              <span style="color: dodgerblue; font-weight: 600;">
                  {{ signRecord.continuityDays }}
                 </span>天啦！
            </div>
          </el-row>
        </el-card>

        <!--关注我们-->
        <About></About>

        <!-- top100 -->

        <div class="top">
          <el-card class="box-card">
            <h2>TOP 100 <span><查看完整租车榜></查看完整租车榜>></span></h2>
            <div class="toplist">
              <ul class="topone">
                <li class=" top-item-first clearfix" v-if="hotMovieList.length > 0">
                  <a :href="`/movie/` + hotMovieList[0].movieId">
                    <div class="first-item clearfix">
                      <el-image lazy :src="fileUploadHost + hotMovieList[0].images" style="width: 120px;height: 78px"
                                :alt="hotMovieList[0].title">
                        <div slot="error" class="image-slot">
                          <img src="../assets/styles/images/2.jpg" alt="" style="width: 120px;height: 78px">
                        </div>
                      </el-image>
                      <div class="movie-overlay">
                        <div class="movie-rank">
                          <i class="index index-hot">1</i>
                        </div>
                      </div>
                    </div>
                    <span class="name"> {{ hotMovieList[0].title }}</span>
                    <span class="rate">{{ hotMovieList[0].rate }}分</span>
                  </a>
                </li>
                <li class="top-item" :key="index" v-for="(item,index) in hotMovieList">
                  <a :href="`/movie/` + item.movieId" v-if="index > 0">
                    <div class="index-box">
                      <i v-if="index < 3" class="index index-hot">{{ index + 1 }}</i>
                      <i v-else class="index">{{ index + 1 }}</i>
                      <span> {{ item.title }}</span>
                    </div>
                    <span class="index-rate">{{ item.rate }}分</span>
                  </a>
                </li>
              </ul>
            </div>
          </el-card>
        </div>

        <!-- 热门演员 -->
        <div class="people">
          <el-card class="box-card">
            <h2>热门车辆</h2>
            <div class="peoplelist">
              <ul class="peoples">
                <li class=" people-item-first clearfix" v-if="hotActorList.length > 0">
                  <a :href="`/actor/` + hotActorList[0].actorId">
                    <div class="first-item clearfix">
                      <img :src="fileUploadHost + hotActorList[0].avatar" alt="" srcset="">
                      <div class="people-overlay">
                        <div class="people-rank">
                          <i class="index index-hot">1</i>
                        </div>
                      </div>
                    </div>
                    <span class="name">{{ hotActorList[0].name }}</span>
                  </a>
                </li>
                <li class="people-item" :key="index" v-for="(actor,index) in hotActorList">
                  <a :href="`/actor/` + actor.actorId" v-if="index > 0">
                    <div class="index-box">
                      <i v-if="index < 3" class="index index-hot">{{ index + 1 }}</i>
                      <i v-else class="index">{{ index + 1 }}</i>
                      <span>{{ actor.name }}</span>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </el-card>
        </div>

        <!-- 热门文章 -->
        <div class="hotspot">
          <el-card class="box-card">
            <h2>热门门店</h2>
            <div class="hotspotlist">
              <ul class="hotspots">
                <li class=" hotspot-item-first clearfix" v-if="hotArticleList.length > 0">
                  <a :href="`/article/` + hotArticleList[0].articleId">
                    <div class="first-item clearfix">
                      <el-image lazy :src="fileUploadHost + hotArticleList[0].images" style="width: 100%;height: 100%"
                                :alt="hotArticleList[0].title">
                        <div slot="error" class="image-slot">
                          <img src="../assets/styles/images/login-body-bg.png" alt="" style="width: 100%;height: 100%"/>
                        </div>
                      </el-image>
                      <div class="article-overlay">
                        <div class="article-rank">
                          <i class="index index-hot">1</i>
                        </div>
                      </div>
                    </div>
                    <span class="name">{{ hotArticleList[0].title | ellipsis(18) }}</span>
                  </a>
                </li>
                <li class="hotspot-item" :key="article.articleId" v-for="(article,index) in hotArticleList">
                  <a :href="`/article/` + article.articleId" v-if="index > 0">
                    <div class="index-box">
                      <i v-if="index < 3" class="index index-hot">{{ index + 1 }}</i>
                      <i v-else class="index">{{ index + 1 }}</i>
                      <span>{{ article.title ? article.title : `未知` }}</span>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import index from '@/api/index';
import movieApi from "@/api/media/movie";
import {getDicts} from '@/api/system/dict/data';
import {listTag} from "@/api/media/tag";
import {listCategory} from "@/api/media/category";
import {mapGetters} from 'vuex'
import {getWeather} from "@/api/weather";
import Weather from "@/components/Amap/weather";
export default {
  components:{Weather},
  data() {
    return {
      tagOptions: [],
      hotMovieList: [],
      hotPlayMovieList: [],
      hotPlayMovieTotle: 0,
      bannerList: [],
      hotActorList: [],
      hotArticleList: [],
      storeList: [],
      position: [116.481485, 39.990464], // 定位
      center: [116.481485, 39.990464],   // 地图初始化视图中心点
      markers: [],
      storeQuery: {
        cityName: '',
        storeName: ''
      }
    }
  },
  created() {
    // listTag({status: '1'}).then(response => {
    //   this.tagOptions = response.rows;
    // });
    index.getAllBannerList().then(response => {
      this.bannerList = response.data;
    });
    // index.getHotMovieList().then(response => {
    //   this.hotMovieList = response.data;
    // });
    // index.getHotActorList().then(response => {
    //   this.hotActorList = response.data;
    // });
    index.getStoreList().then(response => {
      this.storeList = response.data;
    });
    // index.getHotArticleList().then(response => {
    //   this.hotArticleList = response.data;
    // });
    // const hotPlayMovieQueryParams = {pageNum: 1, pageSize: 8, orderByColumn: 'clickCount', isAsc: 'desc'};
    // movieApi.listMovie(hotPlayMovieQueryParams).then(response => {
    //   this.hotPlayMovieList = response.rows;
    //   this.hotPlayMovieTotle = response.total;
    // })
    // 获取签到数据
    // this.getSignData()
  },
  computed: {
    ...mapGetters([
      'signRecord',
      'isLogin'
    ])
  },
  methods: {
    searchStore() {
      index.getStoreList(this.storeQuery).then(response => {
        this.storeList = response.data;
      });
    },
    vailLogin() {
      if (!this.isLogin) {
        this.$notify.error({
          title: '警告',
          message: '登录后才可以签到哦~',
          offset: 100
        });
        this.$modal.confirm('登录后才可以签到哦，是否进行登录', '提示', {
          confirmButtonText: '登录',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //如果没有登录 则转到登录页面
          return this.$store.dispatch('showLoginForm')
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消登录'
          });
        });
        return false;
      } else {
        return true;
      }
    },
    getSignData() {
      if (!this.isLogin) {
        return;
      }
      this.$store.dispatch('GetSignData').then(() => {
      }).catch(err => {
      });
    },
    toSignIn() {
      if (!this.vailLogin()) {
        return;
      }
      this.$store.dispatch('SignIn').then(() => {
        this.msgInfo("签到成功！")
      }).catch(err => {
      });
    },
    toMovieDetail(movieId) {
      window.open('/movie/' + movieId, '_blank')
    },
    rateFormatter(rate, index) {
      if (!rate) {
        if (index === 1) {
          return '';
        }
        return '';
      }
      let number = String(rate);
      const numberArr = number.split('.');
      number = numberArr[index];
      if (!number) {
        return '';
      }
      return index === 0 ? number : '.' + number;
    },
    actorFormatter(actorList) {
      if (actorList.length === 0) {
        return '无';
      }
      const currentSeparator = ",";
      let actions = [];
      for (let index = 0; index < actorList.length; index++) {
        actions.push(actorList[index].name + currentSeparator);
      }
      return actions.join('').substring(0, actions.join('').length - 1);
    },
    /** 标签翻译 */
    tagFormat(tagOptions, tagId) {
      if (!tagId || !tagOptions) {
        return ''
      }
      const currentSeparator = ",";
      let actions = [];
      let tempArr = tagId.split(currentSeparator);
      for (let i = 0; i < tempArr.length; i++) {
        for (let j = 0; j < tagOptions.length; j++) {
          if (tagOptions[j].tagId == ('' + tempArr[i])) {
            actions.push(tagOptions[j].content + currentSeparator);
            break;
          }
        }
      }
      return actions.join('').substring(0, actions.join('').length - 1);
    }
  }
}
</script>
<style>
.hometitle {
  font-size: 18px;
  color: #282828;
  font-weight: 600;
  margin: 0;
  text-transform: uppercase;
  padding-bottom: 15px;
  margin-bottom: 25px;
  position: relative;
}

.hometitle:after {
  content: "";
  background-color: #282828;
  left: 0;
  width: 50px;
  height: 2px;
  bottom: 0;
  position: absolute;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.amap-wrapper {
  width: 100%;
  height: 100%;
  z-index: 10000;
}

.amap-box {
  height: 100%;
}

#amap {
  height: 200px;
  width: 100%;
}
</style>
